<template>
  <div id="loading_common" v-if="isSelfShow">
    <Lottie :options="defaultOptions" v-on:animCreated="handleAnimation"></Lottie>
  </div>
</template>

<script>
    import BaseComponent from "./BaseComponent";
    import Lottie from 'vue-lottie'
    import {loading_animationData} from "../../blackimg/loading";

    export default {
      extends:BaseComponent,
      name: "DefaultLoading",
      components: {Lottie},
      data() {
        return {
          unique_name: 'DefaultLoading',
          isSelfShow:false,
          defaultOptions: {
            animationData: loading_animationData,
            renderer: 'svg', // 渲染出来的是什么格式
            loop: true, // 循环播放
            autoplay: true, // 自动播放
          },
          animate:null,
        }
      },
      methods:{
        handleAnimation(animate) {
          this.animate = animate;
        },
        onEnter() {
          if(this.animate) {
            this.animate.play();
          }
        },
        onExit() {
          if(this.animate) {
            this.animate.stop();
          }
        }
      }
    }
</script>

<style scoped>
#loading_common{
  width: 100%;
  height: 100%;
  z-index: -10000;
}
</style>
